<template>
    <div class="container">
        <div class="content">
            当前用户ID：{{user.id}}
            <el-form ref="form" label-width="100px">
                <el-form-item label="点对点/群发">
                    <el-input v-model="message1" size="medium" style="width: 300px;" placeholder="用户ID"></el-input>
                    <el-button type="primary" size="medium" @click="p2pHandler">发送到Controller</el-button>
                    <el-button type="primary" size="medium" @click="sendHandler">发送到Ws</el-button>
                </el-form-item>

                <el-form-item label="广播消息">
                    <el-input v-model="message2" size="medium" style="width: 300px;" placeholder="消息"></el-input>
                    <el-button type="primary" size="medium" @click="broadcastHandler">发送</el-button>
                </el-form-item>

            </el-form>
            
        </div>

        <div class="content margin-top-10">
            <ul>
                <li v-for="(item, index) in receive" :key="index">{{index}}===>{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import http from '@/utils/http';
    import { mapGetters } from 'vuex'

    let ws ;
    export default {
        name: 'websocket',
        data() {
            return {
                message1: null, //发送的内容
                message2: null, //发送的内容
                receive: []  //返回的内容
            }
        },
        computed: {
            ...mapGetters(['user'])
        },
        created() {
            this.websocket()
        },
        methods: {
            p2pHandler() { //点对点或群发消息，将消息发送到Controller，在由controller调用WebSocket的handler来处理
                http({
                    url: 'http://gateway.bojun.com/websocket/h5/sendToUser',
                    method: 'post',
                    data: {ids: this.user.id, message: this.message1}
                })
            },
            broadcastHandler() { //广播消息，将消息发送到Controller，在由controller调用WebSocket的handler来处理
                http({
                    url: 'http://gateway.bojun.com/websocket/h5/sendToAllUser',
                    method: 'post',
                    data: {message: this.message2}
                })
            },
            sendHandler() {
                //直接将消息发送到ws下
                ws.send(JSON.stringify({"id": this.user.id, "message": this.message1}))
            },
            websocket () { //H5 WebSocket
                ws = new WebSocket('ws://localhost:8888/websocket/h5/handler/sid='+this.user.id);
                ws.onopen = () => {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    console.log('数据发送中...')
                    ws.send(JSON.stringify({"id": 123, "message": "发送消息---》client"}))
                    console.log('数据发送完成')
                }
                ws.onmessage = evt => {
                     console.log('数据已接收...')
                     console.log(evt)
                     console.log(evt.data)
                     this.receive.push(evt.data)
                }
                ws.onclose = function () {
                    // 关闭 websocket
                    console.log('连接已关闭...')
                }
                // 路由跳转时结束websocket链接
                // this.$router.afterEach(function () {
                //     ws.close()
                // })
            }

        }
    }
</script>

<style scoped>

</style>